<template>
  <c-row class="wot-process-config" less-width="20px">
    <c-col :col="3" top>
      <c-row-search single>
        <c-row less-width="66px" :col="12">
          <c-col>
            <el-input
              v-model="keyword"
              clearable
              @keyup.enter.native="search"
              :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
            >
              <c-icon slot="prefix" name="search" prefix></c-icon>
            </el-input>
          </c-col>
          <c-col less right>
            <el-button type="primary" @click="search">
              {{ multLang('btn_search_a') }}
            </el-button>
          </c-col>
        </c-row>
      </c-row-search>
      <c-roll class="wot-process-config-tree">
        <el-tree
          ref="tree"
          :data="tree.data"
          node-key="nid"
          @node-click="clickNode"
          default-expand-all
          highlight-current
          :expand-on-click-node="false"
        >
          <template slot-scope="{ data }">
            <c-text-long>{{ multLang(data.label) }} </c-text-long>
          </template>
        </el-tree>
      </c-roll>
    </c-col>
    <c-col less></c-col>
    <c-col :col="9" top>
      <ProcessLeaf v-if="tree.click.isNode" :data="tree.click"></ProcessLeaf>
      <ProcessNode v-else :data="tree.click"></ProcessNode>
    </c-col>
  </c-row>
</template>
<script>
import { searchWord } from '@/util/data'
import ProcessNode from './ProcessNode.vue'
import ProcessLeaf from './ProcessLeaf.vue'
import { getProcessData } from '@/http/api/v1/wot'
export default {
  name: 'ProcessConfig',
  components: {
    ProcessNode,
    ProcessLeaf
  },
  props: {},
  data() {
    return {
      keyword: '',
      tree: {
        rawData: [],
        data: [],
        click: {}
      }
    }
  },
  computed: {},
  watch: {
    'tree.rawData': function() {
      this.search()
    }
  },
  beforeCreate() {},
  created() {
    // this.query()
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.query()
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    search() {
      this.tree.data = searchWord(this.keyword, this.tree.rawData, 'label')
    },
    clickNode(node) {
      // eslint-disable-next-line no-unused-vars
      const { pref_id, type, children: _, ...data } = node

      data.node_type = (type === 'flow' && 1) || (type === 'subNode' && 3) || 2
      data.pref_id = pref_id || data.node_id
      this.tree.click = data
      this.$nextTick().then(() => this.$refs.tree.setCurrentKey(data.nid))
    },
    query() {
      getProcessData().then(({ data }) => {
        this.tree.rawData = data
        // this.tree.data = data
        // const node = IsEmptyObj(this.tree.click) ? data[0] : this.tree.click
        const node = data[0] || {}
        node && this.clickNode(node)
      })
    }
  }
}
</script>
<style lang="scss">
.wot-process-config {
  @include wh;

  &-tree {
    box-sizing: border-box;
    height: calc(100% - 66px);
    padding: 20px;
    background-color: #fff;
    .c-text-long {
      font-size: 14px;
    }
  }
}
</style>
